<template>
  <div>
    <!-- 选择框 -->
    <el-select v-model="value" placeholder="请选择" @change="change_days">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 选择框结束 -->
    <el-table :data="tableDataa" style="width: 100%" highlight-current-row>
      <!-- <el-table-column label="序号">
        <template scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        v-for="(item, index) in tableData"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        width="160"
      >
        <template scope="scope">
          <!-- <el-input
            size="small"
            v-model="scope.row[item.prop]"
            @change="chanegs(scope.$index, scope.row, item.item)"
          ></el-input> -->
          <!-- <span>{{ scope.row[item.item] }}</span> -->

          <el-button
            v-model="scope.row[item.prop]"
            @click="chanegs(scope.$index, scope.row[item.prop])"
            >{{ scope.row[item.prop] }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      tableData: [],
      tableDataa: [
        {
          id: 1,
          conent0: "语文",
          conent1: "数学",
          conent2: "英语",
          conent3: "政治",
          conent4: "政治",
          conent5: "狭隘难费",
          conent6: "政治",
          conent7: "政治",
          conent8: "政治",
          conent9: "政治",
          conent10: "英语",
          conent11: "政治",
          conent12: "发学",
          conent13: "袋鼠",
          conent14: "老虎",
          conent15: "十字",
          conent16: "政课",
          conent17: "的南卡洛斯",
          conent18: "英语",
          conent19: "政治",
          conent20: "政治",
          conent21: "refrf",
          conent22: "政治",
          conent23: "dqwdqwd",
          conent24: "cweew",
          conent25: "dqwdqw",
          conent26: "英语",
          conent27: "cssd",
          conent28: "政治dasd",
          conent29: "政治dad",
          conent30: "dasd",
        },
        {
          id: 2,
          conent0: "高数",
          conent1: "英语",
          conent2: "英语",
          conent3: "政治",
          conent4: "政治",
          conent5: "狭隘难费",
          conent6: "政治",
          conent7: "政治",
          conent8: "政治",
          conent9: "政治",
          conent10: "英语",
          conent11: "政治",
          conent12: "发学",
          conent13: "袋鼠",
          conent14: "老虎",
          conent15: "十字",
          conent16: "政课",
          conent17: "的南卡洛斯",
          conent18: "英语",
          conent19: "政治",
          conent20: "政治",
          conent21: "refrf",
          conent22: "政治",
          conent23: "dqwdqwd",
          conent24: "cweew",
          conent25: "dqwdqw",
          conent26: "英语",
          conent27: "cssd",
          conent28: "政治dasd",
          conent29: "政治dad",
          conent30: "dasd",
        },
      ],
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "7",
          label: "7",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "30",
          label: "30",
        },
      ],
      value: "1",
    };
  },
  mounted() {
    this.change_days();
  },
  methods: {
    chanegs(index, row) {
      console.log(index, row);
    },
    change_days() {
      this.tableData = [];
      console.log(11111);
      let length = this.value;
      console.log(length);
      for (let i = 0; i < length; i++) {
        let param = {
          label: this.getDay(i) + "" + this.getWeek(this.getDay(i).toString()),
          prop: `conent${i}`,
        };
        this.tableData.push(param);
      }
      console.log(this.tableData);
    },

    // 定义获取天，月，日的方法
    getDay(day) {
      let time = new Date();
      time.setTime(time.getTime() + 24 * 60 * 60 * 1000 * day);
      let tYear = time.getFullYear();
      let tMonth = time.getMonth() + 1;
      let tDate = time.getDate();
      // console.log(tYear, tMonth, tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    getWeek(value) {
      // console.log(value);
      let weekArray = [
        "(星期日)",
        "(星期一)",
        "(星期二)",
        "(星期三)",
        "(星期四)",
        "(星期五)",
        "(星期六)",
      ];
      return weekArray[new Date(value).getDay()];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
